<!DOCTYPE html>
<html lang="en">

<head>
  <meta charset="UTF-8">
  <meta name="viewport" content="width=device-width, initial-scale=1.0">
  <title>05_DOM操作-查询内容</title>
  <!-- 
  在 jQuery 中，查询和判断一个元素是否包含在另一个元素中是非常常见的操作。jQuery 提供了多种方法来实现这一功能。
  一、查询元素
   1. 使用选择器查询元素
  jQuery 提供了强大的选择器，可以通过 ID、类名、标签名等方式查询元素。
  示例
  // 查询 ID 为 myElement 的元素
  var element = $('#myElement');

  // 查询类名为 myClass 的所有元素
  var elements = $('.myClass');

  // 查询所有 <div> 标签
  var divElements = $('div');
  二、判断元素是否包含
   1.  `has()`  方法
  `has()`  方法用于检查一个元素是否包含特定的子元素。如果包含，返回一个新的 jQuery 对象；如果不包含，返回空的 jQuery 对象。

  语法
  $(parentSelector).has(childSelector);
  示例
  // 判断 ID 为 parent 的元素是否包含类名为 child 的元素
  if ($('#parent').has('.child').length > 0) {
      console.log('包含该子元素');
  } else {
      console.log('不包含该子元素');
  }
   2.  `is()`  方法

  `is()`  方法用于判断一个元素是否匹配指定的选择器。可以用于检查某个元素是否是特定的元素或是否包含特定的类。

  语法
  $(element).is(selector);
  示例
  // 判断 ID 为 myElement 的元素是否包含类名为 active
  if ($('#myElement').is('.active')) {
      console.log('元素包含 active 类');
  } else {
      console.log('元素不包含 active 类');
  }
   3.  `find()`  方法

  `find()`  方法用于查找某个元素的所有后代元素，并返回包含这些后代元素的 jQuery 对象。可以结合  `length`  属性判断是否包含特定元素。

  语法
  $(parentSelector).find(childSelector);
  示例
  // 判断 ID 为 parent 的元素是否包含类名为 child 的元素
  if ($('#parent').find('.child').length > 0) {
      console.log('包含该子元素');
  } else {
      console.log('不包含该子元素');
  }
  三、总结

  - jQuery 提供了多种方法来查询和判断元素是否包含特定的子元素。
  -  `has()`  方法用于检查父元素是否包含子元素。
  -  `is()`  方法用于判断元素是否匹配特定选择器。
  -  `find()`  方法用于查找某个元素的后代元素，并可以结合  `length`  属性判断是否存在。
  -->
</head>

<body>

  <div id="parent">
    <div class="child"></div>
  </div>

  <script src="../libs/jquery-3.6.0.js"></script>
  <script>
    // 判断 ID 为 parent 的元素是否包含类名为 child 的元素
    if ($('#parent').has('.child').length > 0) {
      console.log('包含该子元素');
    } else {
      console.log('不包含该子元素');
    }

    // 判断 ID 为 myElement 的元素是否包含类名为 active
    if ($('#parent').is('.active')) {
      console.log('元素包含 active 类');
    } else {
      console.log('元素不包含 active 类');
    }

    // 判断 ID 为 parent 的元素是否包含类名为 child 的元素
    if ($('#parent').find('.child').length > 0) {
      console.log('包含该子元素');
    } else {
      console.log('不包含该子元素');
    }

    // get() 方法获取元素
    var element = $('#parent').get(0);
    console.log(element);
  </script>

</body>

</html>